﻿<h4>Text labels</h4>
<div style="display: flex; flex-direction: column; height: min-content;">
    <label for="slider1" style="margin-left: 8px;">Temperature:</label>
    <FluentSlider id="slider1" Min="0" Max="100" Step="10" @bind-Value=value1>
        <FluentSliderLabel Position="10">10&#8451;</FluentSliderLabel>
        <FluentSliderLabel Position="90">90&#8451;</FluentSliderLabel>
    </FluentSlider>
</div>

<h5 style="margin-top: 60px;">Custom labels and rtl support</h5>
<div style="display: flex; flex-direction: column; align-items: flex-start; height: min-content;">
    <label for="rtl-slider" style="margin-left: 8px;">rtl support</label>
    <div dir="rtl" style="width: 100%;">
        <FluentSlider id="rtl-slider" Min="0" Max="100" Step="10" @bind-Value=value2>
            <FluentSliderLabel Position="10">10</FluentSliderLabel>
            <FluentSliderLabel Position="20">20</FluentSliderLabel>
            <FluentSliderLabel Position="40">40</FluentSliderLabel>
            <FluentSliderLabel Position="60">60</FluentSliderLabel>
            <FluentSliderLabel Position="80">80</FluentSliderLabel>
        </FluentSlider>
    </div>
</div>
@code {
    int value1=0, value2=80;
}